<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1 ref="msdom"> {{msg}}</h1>
    <button @click="change">改变</button>
    <div class="swiper-container"></div>
  </div>
   <script src="./vue.js"></script>
   <script>
      // nextTick是 获取vue更新的最新dom 
      //由于vue是异步渲染，数据更新后，视图不会立刻更新，而是等同一事件循环中的所有数据更新完成之后，再统一进行视图更新
      // 在created 生命周期 无法操作dom ,使用nextTick 可以操作dom
      // 应用场景：在nextTick 中 可以确保dom 加载完成 可以初始化一些插件

    new Vue({
      el:"#app",
      data(){
        return {
          msg:"周一"
        }
      },
      created(){
     
        this.$nextTick(()=>{
             console.log(this.$refs.msdom.innerHTML)//获取最新的dom
        })
        this.$nextTick(()=>{
          // new Swiper('.swiper-container',{
            
          // })
        })
      },
      mounted() {
        
      },
      methods:{
        change(){
          this.msg="周二"
          // vue获取dom的方式
          // ref 获取  或这  document.querySelector等
          console.log(this.$refs.msdom.innerHTML)
          // nextTick 原理将是 回调函数  放到异步任务队列中执行
          this.$nextTick(()=>{
                 console.log(this.$refs.msdom.innerHTML,"-------")
          })
        }
      }
    })


   </script>
</body>
</html>